<template>
    <view class="search-bar" :style="{'padding': noPadding ? '0' : ''}">
        <view class="search-inner" :style="{'backgroundColor': bgColor}" @click="onClick">
            <text class="jicon-search" :style="{'color': placeholderColor}"></text>
            <view class="tags" v-if="tags.length">
                <view class="tag" v-for="(item, index) in tags" :key="index">
                    {{ item }} <text class="jicon-close" @click="closeTag(index)"></text>
                </view>
            </view>
            <input type="text" :focus="focus" v-model="innerValue" :disabled="disabled" :placeholder="placeholderText"
                :placeholder-style="`color: ${placeholderColor}`" @confirm="confirm" confirm-type="search" />
            <view class="clear" v-if="innerValue.length > 0" @click="clear">
            <u-icon name="close" color="#fff" size="12"></u-icon>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: 'searchBar',
        data() {
            return {
                innerValue: ''
            }
        },
        props: {
            keyword: {
                type: [String, Number],
                default: ''
            },
            tags: {
                type: Array,
                default: () => ([])
            },
            placeholderText: {
                type: String,
                default: '请输入关键字'
            },
            placeholderColor: {
                type: String,
                default: '#bababa'
            },
            disabled: Boolean,
            focus: Boolean,
            noPadding: Boolean,
            bgColor: String
        },
        mounted() {
            this.innerValue = this.keyword
        },
        watch: {
            keyword(to) {
                if (to === this.innerValue) return
                this.innerValue = to
            }
        },
        methods: {
            confirm() {
                this.$emit('confirm', this.innerValue)
            },
            clear() {
                this.innerValue = ''
                this.$emit('clear')
            },
            onClick() {
                this.$emit('click')
            },
            closeTag(index) {
                this.$emit('closeTag', index)
            }
        }
    }
</script>

<style scoped lang="scss">
    .search-bar {
        padding: 20rpx 40rpx;

        .search-inner {
            display: flex;
            align-items: center;
            background-color: #f7f4f4;
            border-radius: 34rpx;
            height: 60rpx;

            .jicon-search {
                color: #bababa;
                margin-left: 20rpx;
            }

            .tags {
                display: flex;
                align-items: center;
                padding: 0 10rpx;

                .tag {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 46rpx;
                    border-radius: 46rpx;
                    padding: 0 12rpx;
                    background-color: #a5a5a5;
                    color: #fff;
                    font-size: 24rpx;

                    text {
                        margin-top: 2rpx;
                        margin-left: 6rpx;
                    }
                }
            }

            input {
                height: 60rpx;
                flex: 1;
                width: 0;
                padding: 0 16rpx;
                font-size: 28rpx;
                color: #666;
            }

            .clear {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 40rpx;
                height: 40rpx;
                border-radius: 50%;
                margin: 0 16rpx;
                background-color: #c8c9cc;
                color: #fff;
                transform-origin: center center;
                transform: scale(0.76);
            }
        }
    }
</style>
